<template>
  <div>
    <div slot="searchLeft">
      <a-button
        v-if="optType === 2"
        type="primary"
        style="margin-bottom: 20px"
        @click="showModal"
        :disabled="!$commonJs.isAth('addActor')"
      >
        <a-icon type="plus" />
        新增
      </a-button>
    </div>
    <c-table
      :columns="columns"
      :dataSource="dataSource"
      @changeOpt="changeOpt"
      :pagination="pagination"
      style="width: 100%"
    >
    </c-table>
    <add-modal
      :editInfo="editInfo"
      :visible="visible"
      :editBoxState="editBoxState"
      @handleCancel="handleCancel"
    ></add-modal>
  </div>
</template>

<script>
import cTable from "@/components/table/index";
import { Modal } from "ant-design-vue";
export default {
  name: "baseInfo",
  components: {
    cTable,
    addModal: () => import("@/views/project/list/addActor")
  },
  data() {
    return {
      visible: false,
      editInfo: {},
      editBoxState: 0, //编辑弹出框状态，0为新增框，1为编辑框
      columns: [
        {
          title: "ID",
          dataIndex: "id",
          align: "center",
          width: 70
        },
        {
          title: "头像",
          dataIndex: "avatar",
          width: 100,
          scopedSlots: { customRender: "avatar" }
        },
        {
          title: "姓名",
          dataIndex: "name"
        },
        {
          title: "职业",
          dataIndex: "position"
        },
        {
          title: "角色",
          dataIndex: "role"
        },
        {
          title: "排序",
          dataIndex: "sort"
        },
        {
          title: "创建时间",
          dataIndex: "create_time"
        },
        {
          title: "操作",
          dataIndex: "opt",
          width: 120,
          type: "btn",
          list: [
            {
              ath: "editActor",
              label: "编辑",
              extraValue: "edit",
              className: "text-green divider"
            },
            {
              ath: "delActor",
              label: "删除",
              extraValue: "delete",
              className: "text-danger"
            }
          ],
          scopedSlots: { customRender: "opt" }
        }
      ],
      dataSource: [],
      pagination: {
        current: 1,
        pageSize: 10,
        total: 0
      },
      optType: 1
    };
  },
  methods: {
    handleCancel(isFresh) {
      if (isFresh) {
        this.getInfo();
      }
      this.visible = false;
    },
    showModal() {
      this.editInfo = {};
      this.$set(this.editInfo, "upload", []);
      this.editBoxState = 0;
      this.visible = true;
    },
    changeOpt(item, type) {
      switch (type) {
        case "edit":
          this.redact(item);
          break;
        case "delete":
          this.del(item);
      }
    },
    redact(data) {
      this.editInfo = JSON.parse(JSON.stringify(data));
      this.editBoxState = 1;
      this.$set(this.editInfo, "upload", [
        {
          uid: "1",
          status: "done",
          url: this.$api.picPre + this.editInfo.avatar,
          name: this.editInfo.avatar,
          response: {
            key: this.editInfo.avatar
          }
        }
      ]);
      this.visible = true;
    },
    del(item) {
      let that = this;
      Modal.confirm({
        title: "您确定删除该演职人员吗？",
        okText: "确定",
        okType: "danger",
        cancelText: "取消",
        onOk() {
          that.$ajax
            .post(that.$api.delProjectActorList, {
              id: item.id
            })
            .then(() => {
              that.$notification.success({
                message: "删除成功"
              });
              that.getInfo();
            })
            .catch(err => {
              that.$notification.error({
                message: err
              });
            });
        }
      });
    },
    getInfo() {
      this.$ajax
        .get(this.$api.getProjectActorList, {
          page_size: this.pagination.pageSize,
          page: this.pagination.current,
          project_id: this.$route.params.id
        })
        .then(res => {
          this.dataSource = res.data;
          this.pagination.total = res.total_count;
        })
        .catch(err => {
          this.$notification.error({
            message: err
          });
        });
    }
  },
  created() {
    if (this.$route.name === "editProject") {
      this.optType = 2;
    } else if (this.$route.name === "detailsProject") {
      this.optType = 3;
      this.columns.pop();
    }
    this.getInfo();
  }
};
</script>

<style scoped lang="less"></style>
